// Original file souce copyright John Datserakis https://github.com/johndatserakis/vue-simple-context-menu

.vue-simple-context-menu {
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
  display: none;
  list-style: none;
  position: absolute;
  z-index: 1000000;
  background: lighten($theme-bg, 5%);
  color: $text;
  padding: ($gutter-h * 0.75) 0;
  border-radius: 6px;
  box-shadow: var(--elevation-5);
  font-size: 0.85rem;
  text-transform: none;
  font-weight: 400;
  min-width: 150px;
  border: 0;
  @extend .card-shadow-hover;
}
.vue-simple-context-menu--active {
  display: block;
}
.vue-simple-context-menu__item {
  display: flex;
  padding: 0 $gutter-w;
  font-size: 0.9rem;
  min-height: 28px;
  color: $text-dark;
  cursor: pointer;
  align-items: center;
  &:hover {
    background: rgba($theme-base, 0.05);
  }
  i {
    height: 24px!important;
    line-height: 24px!important;
    width: 24px;
    opacity: 0.6;
    margin-right: $gutter-h!important;
  }
}
.vue-simple-context-menu__divider, hr {
  min-height: 0;
  width: 100%;
  height: 1px;
  margin: ($gutter-h * 0.75) 0;
  box-sizing: border-box;
  background: transparent;
  border: 0;
  border-top: 1px solid $border-color;
  pointer-events: none;
  + hr, &:last-child {
    display: none;
  }
}
.vue-simple-context-menu li:first-of-type {
  margin-top: 0;
}
.vue-simple-context-menu li:last-of-type {
  margin-bottom: 0;
}